<template>
  <!-- 整个权限树 -->
  <div>
    <a-card style="width: 100%;min-height: 420px;min-width: 100%;float: left;">
      <div slot="title">
        <h2>维护整个权限树</h2>
      </div>
      <a-spin :spinning="treeOnLoad" style="min-height: 420px;width: 100%;">
        <a-tree
          v-if="!treeOnLoad"
          :tree-data="treeData"
          draggable
          blockNode
          v-model="treeData"
          :defaultExpandAll="true"
          :replaceFields="replaceFields"
          :autoExpandParent="true"
          :defaultExpandedKeys="treeData">
          <template v-slot:title="nodeData">
            <div @mouseenter="mouseenterDict(nodeData)" @mouseleave="mouseleaveDict(nodeData)" class="treeItem">
              <div>{{ nodeData.name }}</div>
              <a-button-group
                style="margin-left: 60px;margin-top: -2px;"
                v-show="mouseenterId == nodeData.permissionId">
                <a-button
                  size="small"
                  @click="Add(nodeData)"
                  icon="plus-circle"
                  title="添加"
                  v-checkBtn="'permission:add'"></a-button>
                <a-button
                  size="small"
                  @click="Edit(nodeData)"
                  icon="form"
                  title="修改"
                  v-checkBtn="'permission:edit'"></a-button>
                <a-button
                  size="small"
                  icon="close-circle"
                  title="删除"
                  @click="Delete(nodeData)"
                  v-checkBtn="'permission:del'"></a-button>

              </a-button-group>
            </div>
          </template>
        </a-tree>
      </a-spin>

      <a-back-top />
    </a-card>
    <saveModal v-if="dialog.save" ref="saveModal" @success="GetTree"></saveModal>
  </div>
</template>
<script>
import saveModal from './save'
import { getTree, deleteTree } from '@/api/power'
import { Modal } from 'ant-design-vue'
export default {
    components: { saveModal },
    data () {
        return {
            confirmLoading: false,
            treeData: [],
            // 权限树是否显示操作图标
            mouseenterId: '',
            dialog: {
                save: false
            },
            fieldNames: { children: 'children', title: 'name', key: 'permissionId' },
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'permissionId',
                value: 'permissionId'
            },
            treeOnLoad: true
        }
    },
    // mounted() {
    //     this.GetTree()
    // },
    created () {
        this.GetTree()
    },
    methods: {
        GetTree () {
            getTree().then(res => {
                if (res.code == 200) {
                    this.treeData = res.data
                    this.treeOnLoad = false
                    this.dialog.save = false
                }
            })
        },
        // 新增
        Add (nodeData) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open().setData(nodeData)
            })
        },
        // 编辑
        Edit (nodeData) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(nodeData)
            })
        },
        Delete (nodeData) {
            const _this = this
            Modal.confirm({
                title: '删除信息',
                content: '确定要删除吗？',
                onOk: () => {
                    deleteTree(nodeData.permissionId).then(res => {
                        if (res.code == 200) {
                            _this.GetTree()
                            _this.$message.success('删除成功')
                        } else {
                            _this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        // 左侧鼠标悬浮展示图标
        mouseenterDict (data) {
            this.mouseenterId = data.permissionId
        },
        // 左侧鼠标离开不展示图标
        mouseleaveDict () {
            this.mouseenterId = ''
        }
    }
}
</script>

<style scoped lang="less">
.treeItem {
    display: flex;
}
</style>
